<template>
  <Main :type="'form'">
    <Title :title="'puls会员卡权益'" />

    <el-row>
      <el-col :span="6">
        <div class="moni">
          <img
            src="http://oss.ztwlxx.cn/%E5%9B%BA%E5%AE%9A%E5%8D%A1%E9%A2%86%E5%8F%96%E5%90%8E.png"
            width="100%"
            height="100%"
          />
        </div>

        <el-button
          v-if="msg.status != 0"
          type="danger"
          style="width:82%;margin:20px 0;"
          @click="stopCard(0)"
          >停用</el-button
        >
        <el-button
          v-else
          type="success"
          style="width:82%;margin:20px 0;"
          @click="stopCard(1)"
          >启用</el-button
        >
        <div style="font-size:12px;width:82%;">
          停用后将不会再新增会员不影响已有会员，停用不可编辑
        </div>
      </el-col>
      <el-col :span="18">
        <div class="add-form-title">
          <p>会员卡信息</p>
        </div>
        <div class="msg">
          <p>会员卡标题：{{ msg.title }}</p>
          <p>卡号：{{ msg.card_number }}</p>
          <p>
            开卡条件：成为客户
            <span v-if="msg.condition == 1"
              >、 储值{{ msg.stored[0] }}元
              <span v-if="msg.stored[1] != 0 && msg.stored[1] != ''">
                赠送{{ msg.stored[1] }}元
              </span>
              <span v-if="msg.stored[2] != 0 && msg.stored[2] != ''">
                赠送{{ msg.stored[2] }}积分
              </span>
            </span>
            <span v-if="msg.condition == 2"
              >、 消费
              <span v-if="msg.stored[0] != 0 && msg.stored[0] != ''">
                满{{ msg.stored[0] }}元
              </span>
              <span v-if="msg.stored[1] != 0 && msg.stored[1] != ''">
                {{ msg.stored[1] }}次
              </span>
            </span>
            <span v-if="msg.condition == 3"
              >、 购买指定商品:
              <span v-for="(item, index) in msg.appointGoods" :key="index">
                “{{ item.goods_name }}”</span
              >
            </span>
            <span v-if="msg.condition == 4"
              >、 开卡费用{{ msg.stored[0] }}元
            </span>
          </p>
        </div>
        <div class="add-form-title">
          <p>会员权益</p>
        </div>
        <div class="privilege">
          <p v-for="(item, index) in msg.authority" :key="index">
            {{ item.name }}
          </p>
        </div>
        <div class="add-form-title">
          <p>会员卡专属商品</p>
          <el-button
            size="mini"
            type="text"
            :disabled="msg.status == 0"
            @click="dialogVisibleShop = true"
          >
            编辑商品
          </el-button>
        </div>
      </el-col>
    </el-row>
    <Footer>
      <el-button plain @click="$emit('out')">返 回</el-button>
      <el-button
        plain
        :disabled="msg.status == 0"
        @click="$emit('out', msg.card_id)"
        >编辑会员卡</el-button
      >
      <el-button @click="dialogVisibleFX = true">分享设置</el-button>
    </Footer>

    <el-dialog title="编辑商品" :visible.sync="dialogVisibleShop" width="60%">
      <div class="shopList">
        <div v-if="msg.exclusiveGoods.length > 0" class="shopList-box">
          <div
            v-for="(item, index) in msg.exclusiveGoods"
            :key="index"
            class="shopList-chlid"
          >
            <div class="shopList-chlid-img">
              <img
                :src="
                  $store.state.qiniu +
                    item.goods_cover.split(',')[0] +
                    $store.state.imgRotate
                "
                width="100%"
                height="100%"
              />
            </div>
            <div class="shopList-chlid-font">
              <div class="one">
                {{ item.goods_name }}
              </div>
              <div class="two">
                <span v-if="item.low_goods_price == item.up_goods_price"
                  >￥{{ item.low_goods_price }}</span
                >
                <span v-else
                  >￥{{ item.low_goods_price }} - ￥{{
                    item.up_goods_price
                  }}</span
                >
              </div>
            </div>
            <div style="line-height:70px;">
              <el-button
                size="mini"
                type="text"
                @click="shopDel(item.goods_id)"
              >
                移除
              </el-button>
            </div>
          </div>
        </div>
        <div>
          <img src="https://oss.ztwlxx.cn/Artwork.png" />
          <div>暂无数据</div>
        </div>
        <!-- <el-pagination :page-size='12'
                       layout='prev, pager, next'
                       :total='totals'
                       @current-change='changes'
                       style='margin-top:20px;text-align: center;'>
        </el-pagination> -->
      </div>
    </el-dialog>

    <el-dialog title="分享设置" :visible.sync="dialogVisibleFX" width="40%">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="分享标题" prop="title">
          <el-input
            v-model="form.title"
            type="text"
            size="medium"
            style="line-height: 20px;"
            placeholder="请输入内容"
            maxlength="25"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="分享描述" prop="content">
          <el-input
            v-model="form.content"
            type="textarea"
            maxlength="40"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="分享图标" prop="file">
          <div class="commodityImage">
            <div class="icon">
              <div>
                <img
                  v-if="form.file"
                  :src="$store.state.qiniu + form.file + $store.state.imgRotate"
                />
              </div>
            </div>
            <el-button type="primary" @click="showImages = true"
              >选择图片</el-button
            >
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click.stop="submit('save')">确 定</el-button>
      </span>
    </el-dialog>
    <images
      :dialog-images="showImages"
      :use-btn="true"
      :use-type="'img'"
      @close="close"
    />
  </Main>
</template>
<script>
import {
  SETVIPCARDEXCLUSIVESHOP,
  VIPCARDAUTHORITYDETAILS,
  SETSHARE,
  VIPCARDSTATUS
} from "../service";

export default {
  components: {
    images: r =>
      require.ensure([], () => r(require("publicCom/imgupdate")), "imgupdate")
  },
  props: {
    cardId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      dialogVisibleShop: false,
      dialogVisibleFX: false,
      showImages: false,
      shopList: [],
      totals: 0,
      pages: 1,
      msg: {
        title: "",
        card_number: "",
        condition: "",
        authority: [],
        exclusiveGoods: [],
        appointGoods: [],
        stored: "",
        status: 0
      },
      form: {
        title: "",
        content: "",
        file: ""
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        content: [{ required: true, message: "请输入描述", trigger: "blur" }],
        file: [{ required: true, message: "请选择图片", trigger: "blur" }]
      }
    };
  },
  created() {
    this.getList();
    this.submit();
  },
  methods: {
    close(file) {
      this.showImages = false;
      if (!file) return;
      this.form.file = file.file_path;
    },
    async shopDel(goodsIdArr) {
      await SETVIPCARDEXCLUSIVESHOP({
        goods_id_arr: goodsIdArr,
        flag: "update",
        card_id: this.msg.card_id
      }).then(res => {
        let { code, msg } = res;
        if (code === 200) {
          this.$message.success(msg);
          this.getList();
        } else {
          this.$message.error(msg);
        }
      });
    },
    async getList() {
      await VIPCARDAUTHORITYDETAILS({ card_id: this.cardId }).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          data.stored = data.stored.split(",");
          this.msg = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    },
    async submit(flag) {
      if (flag === "save") {
        await this.$refs["form"].validate(valid => {
          if (valid) {
            SETSHARE({
              type_id: this.msg.cardId,
              type: 1,
              flag,
              title: this.form.title,
              content: this.form.content,
              file: this.form.file
            }).then(res => {
              let { code, msg } = res;
              if (code === 200) {
                this.$message.success(msg);
                this.dialogVisibleFX = false;
              } else {
                this.$message.error(msg);
              }
            });
          } else {
            return false;
          }
        });
      } else {
        await SETSHARE({
          type_id: this.cardId,
          type: 1
        }).then(res => {
          let { code, data, msg } = res;
          if (code === 200) {
            if (data != null) {
              this.form.title = data.title;
              this.form.content = data.content;
              this.form.file = data.img;
            }
          } else {
            this.$message.error(msg);
          }
        });
      }
    },
    async stopCard(status) {
      await this.$confirm(status === 0 ? "是否停用?" : "是否启用", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          VIPCARDSTATUS({
            card_id: this.cardId,
            status
          }).then(res => {
            let { code, msg } = res;
            if (code === 200) {
              this.getList();
              this.$message.success(msg);
            } else {
              this.$message.error(msg);
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消!");
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.moni {
  width: 90%;
  max-width: 300px;
  height: 482px;
  background: #ffffff;
}
.msg {
  width: 90%;
  min-height: 100px;
  margin-bottom: 40px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  background: #ffffff;
  font-size: 14px;
  padding-left: 10px;
  p {
    width: 100%;
    min-height: 32px;
    line-height: 32px;
  }
}
.privilege {
  width: 90%;
  min-height: 60px;
  padding: 10px 5px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  margin-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  p {
    min-width: 13%;
    height: 40px;
    line-height: 40px;
    margin: 5px 5px;
    padding: 0 6px;
    border-radius: 6px;
    background: #f2f2f2;
    text-align: center;
  }
}
.shopList {
  height: 390px;
  border-radius: 6px;
  border: 10px solid #f2f2f2;
  margin-top: -10px;
  overflow-y: auto;
  .shopList-box {
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;
    height: 300px;
    .shopList-chlid {
      width: 23.5%;
      height: 90px;
      background: #ffffff;
      border: 1px solid #e2e2e2;
      border-radius: 6px;
      margin: 10px 10px 0 0;
      padding: 10px 0 0 10px;
      .shopList-chlid-img {
        width: 70px;
        height: 70px;
        overflow: hidden;
        border-radius: 6px;
        float: left;
      }
      .shopList-chlid-font {
        width: 50%;
        height: 70px;
        float: left;
        margin-left: 10px;
        overflow: hidden;
        .one {
          width: 100%;
          height: 38px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .two {
          width: 100%;
          height: 26px;
          line-height: 26px;
          color: #ff2525;
          font-size: 12px;
        }
      }
    }
  }
}
.commodityImage {
  .icon {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    display: block;
    float: left;
    margin-right: 10px;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
    }
  }
  input {
    float: left;
  }
}
</style>
